<template>
  <div class="bundle">
    <el-container>
      <el-container>
        <el-header height="50px">
					<h3>特惠券包管理</h3>
				</el-header>
        <el-main>
          <el-form ref="query" :model="query" label-width="120px">
            <el-row>
              <el-col :span="7">
                <el-form-item label="特惠券包名称：">
                  <el-input v-model="query.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="特惠券包ID：">
                  <el-input v-model="query.id"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="是否在售：">
                  <el-select v-model="query.saleFlag" placeholder="全部">
                    <el-option
                      v-for="item in saleOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="5">
					<el-form-item label="售卖平台：">
            			<el-select v-model="query.salePlatform" placeholder="全部">
    						<el-option
      							v-for="item in salePlatform"
      							:key="item.value"
      							:label="item.label"
      							:value="item.value">
    						</el-option>
  						</el-select>
					</el-form-item>
              </el-col>-->
            </el-row>
            <el-row>
              <el-col :span="7">
                <el-form-item label="活动开始：">
                  <el-date-picker
                    type="datetime"
                    placeholder="开始日期"
                    v-model="query.showTime"
                    style="width: 100%;"
                    value-format="timestamp"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="至：">
                  <el-date-picker
                    placeholder="结束时间"
                    type="datetime"
                    v-model="query.finishTime"
                    style="width: 100%;"
                    value-format="timestamp"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="支付时间：">
                  <el-date-picker
                    placeholder="支付时间"
                    type="datetime"
                    v-model="query.orderTime"
                    style="width: 100%;"
                    value-format="timestamp"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="text-align: center">
              <el-button type="primary" @click="queryList">查询</el-button>
              <el-button type="primary" @click="createBundle">新建</el-button>
              <el-button type="primary" @click="clearQuery">清空筛选条件</el-button>
            </el-row>
          </el-form>
          <el-table :data="bundletTableData" class="bundle-table">
            <el-table-column prop="id" label="特惠券包ID" width="100"></el-table-column>
            <el-table-column prop="name" label="特惠券包名称" width="200"></el-table-column>
            <el-table-column prop="regionBlockCode" label="地区" width="200"></el-table-column>
            <el-table-column prop="originalPrice" :formatter="amtFormat" label="原价(元)" width="80"></el-table-column>
            <el-table-column prop="sellPrice" :formatter="amtFormat" label="卖价(元)" width="80"></el-table-column>
            <el-table-column prop="remainedQty" label="库存" width="80"></el-table-column>
            <el-table-column prop="showTime" :formatter="dateFormat" label="活动开始时间" width="160"></el-table-column>
            <el-table-column prop="orderTime" :formatter="dateFormat" label="支付开始时间" width="160"></el-table-column>
            <el-table-column prop="finishTime" label="活动结束时间" :formatter="dateFormat" width="160"></el-table-column>
            <el-table-column prop="status" label="是否在售" :formatter="saleFormat" width="100"></el-table-column>
            <el-table-column prop="id" label="操作按钮" width="200">
              <template slot-scope="scope">
                <p v-if="scope.row.status==2">
                  <el-button size="mini" type="danger" @click="handleDetail(scope.row.id)">查看详情</el-button>
                  <el-button size="mini" @click="handleDelete(scope.row.id)">暂停</el-button>
                </p>
                <p v-if="scope.row.status==3">
                  <el-button size="mini" type="danger" @click="handleDetail(scope.row.id)">查看详情</el-button>
                </p>
                <p v-if="scope.row.status==0">
                  <el-button size="mini" @click="handleEdit(scope.row.id)">编辑详情</el-button>
                </p>
              </template>
            </el-table-column>
          </el-table>
          <div style="text-align: right; margin-top: 30px;">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 50, 100, 200]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";
import api from "@/api";
import format from "@/utils/format";
export default {
  data() {
    return {
      currentMenu: "",
      query: {},
      saleOptions: [
        {
          value: "sale",
          label: "在售"
        },
        {
          value: "close",
          label: "下架"
        },
        {
          value: "stop",
          label: "暂停"
        },
        {
          value: "all",
          label: "全部"
        }
      ],
      salePlatform: [
        {
          value: "mini",
          label: "小程序"
        },
        {
          value: "close",
          label: "app"
        },
        {
          value: "all",
          label: "全部"
        }
      ],
      bundletTableData: [],
      currentPage: 0,
      pageSize: 10,
      total: 0
    };
  },
  mounted: function() {
    this.queryList();
  },
  methods: {
    init() {
      this.queryList;
    },
    queryList: function() {
      var query = {
        name: this.query.name,
        id: this.query.id,
        saleFlag: this.query.saleFlag,
        salePlatform: this.query.salePlatform,
        showTime: this.query.showTime,
        orderTime: this.query.orderTime,
        finishTime: this.query.finishTime,
        pageSize: this.pageSize,
        currPage: this.currentPage
      };
      api.bundle.fetchBundle(query).then(res => {
        this.bundletTableData = res.data.data.list;
        this.total = res.data.data.totalCount;
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 0;
      this.queryList();
    },
    handleDelete(val) {
      api.bundle.handleDelete(val).then(res => {
        if ((res.data.code = 200)) {
          this.$alert("下架成功！");
        }
        this.queryList();
      });
    },
    handleEdit(val) {
      this.$router.push({ path: "/bundle/edit", query: { id: val } });
    },
    handleDetail(val) {
      this.$router.push({ path: "/bundle/detail", query: { id: val } });
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.queryList();
    },
    saleFormat: function(row, column, cellValue) {
      return cellValue == 2 ? "在售" : cellValue == 3 ? "暂停" : "已下架";
    },
    dateFormat: function(row, column, cellValue) {
      //row 表示一行数据, updateTime 表示要格式化的字段名称
      return format.formatDate(cellValue);
    },
    amtFormat(row, column, cellValue) {
      return format.toRMB(cellValue);
    },
    createBundle() {
      this.$router.push({ path: "/bundle/create" });
    },
    clearQuery() {
      this.query = {};
    }
  }
};
</script>

<style lang="scss" scoped>
	.bundle-table {
		margin-top: 30px;
	}
</style>